<template>
  <div class="loading-container">
    <div class="spinner"></div>
    <p>正在通过支付宝安全登录，请稍候...</p>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { tokenManager } from '@/utils/token';
import { userManager } from '@/utils/user';     // 【修改】引入 userManager
import { userServie } from '@/services/user_service'; // 【修改】引入 userServie

onMounted(async () => { // 【修改】将 onMounted 设置为 async 异步函数
  const route = useRoute();

  // 从 URL 的查询参数中获取 token
  const token = route.query.token;

  if (token && typeof token === 'string') {
    try {
      // 步骤1：将 Token 保存到 localStorage
      tokenManager.setToken(token);

      // 【修改】步骤2：调用后端接口，根据新token获取完整的用户信息
      userServie.getMyInfo((res) => {
        if (res && res.code === 1000) { // 假设1000是成功码
          // 步骤3：获取成功后，调用 userManager 保存用户信息到 localStorage
          userManager.setUserInfo(res.data.user, res.data.student, res.data.teacher);

          // 步骤4：所有信息都保存完毕后，再跳转到首页并刷新
          window.location.href = '/';
        } else {
          // 如果获取用户信息失败，也跳转到错误页
          console.error('获取用户信息失败:', res.msg);
          window.location.href = '/?error=user_info_failed';
        }
      });

    } catch (error) {
      console.error('处理Token或获取用户信息时出错:', error);
      window.location.href = '/?error=processing_failed';
    }

  } else {
    console.error('未在回调URL中找到Token，授权可能已失败。');
    window.location.href = '/?error=alipay_auth_failed';
  }
});
</script>

<style scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 1.2rem;
  color: #666;
  background-color: #f5f5f5;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #1677FF;
  margin-bottom: 20px;
  animation: spin 1s ease infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>